<template>
	<view class="body">
		<view class="body-data back">
			<view style="margin: calc(2vh) 0 calc(2vh) 0;">
				<text style="font-size: calc(2.5vh);font-weight: 700;">商品列表</text>
			</view>
		</view>
		<view style="display: inline-block;">
			<view class="body-data back" style="display: inline-block;height: calc(25vh);" v-for="(item,index) in goods" :key="index"
			 @click="toGoodsDetail(item)">
				<view class="" style="display: inline-block;position:sticky;width: calc(30vw);margin-top: calc(5vh);">
					<image :src="item.image" style="width: calc(26vw);height: calc(15vh);"></image>
				</view>
				<view class="" style="display: inline-block;position: absolute; position:sticky;vertical-align: top;margin: 0 calc(1vw) 0 calc(1vh);width: calc(60vw);height:calc(36vw);">
					<view>
						<text style="font-size: medium; font-weight: 700;">{{item.name}}</text>
					</view>
					<!-- <view>
						<text v-for="(item,index) in 3" :key=index style="font-size: calc(1vh);margin: 0 calc(1vw) 0 calc(1vh);color:#FF0000;background-color: #ff5e62;">短视频</text>
					</view> -->
					<view style="font-size:35rpx;font-weight:700;color:#FF0000;">￥{{item.price}}</view>
					<view>
						<text style="font-size: medium;background-color:#333333;color:#CFB53B ;">佣金:{{item.commission}}</text>
						<!-- <text style="font-size: calc(1vh);background-color:#CFB53B ;">销量：{{goods.sales}}件</text> -->
					</view>
					<view>
						<text style="font-size: medium;color: #CFB53B ;">{{item.shopName}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad: function(options) {
			this.user.id = options.id;
			this.user.userId = options.userId;
			console.log(options)
			this.getAllGoods();
		},
		onReachBottom() {
			this.page = this.page + 1
			this.getAllGoods(this.index);
		},
		data() {
			return {
				page: 1,
				goods: [],
				user: {},
			}
		},
		methods: {
			getAllGoods() {
				this.$http({
					url: '/goods/getGoodsListByUserId/' + this.page,
					method: 'POST',
					data: {
						userId: this.user.userId
					},
				}).then(res => {
					console.log(res)
					res.data.data.list.forEach((item, index) => {
						if (this.goods.length < res.data.data.total) {
							this.goods.push(item)
							console.log('1', this.goods)
						} else {
							uni.showToast({
								title: '最后',
								duration: 2000
							});
						}
					})
				});
			},
			toGoodsDetail(val) {
				uni.navigateTo({
					url: "/pages/goods/goodsDetails?id=" + val.id + "&userId=" + val.userId
				})
			},
		}
	}
</script>

<style>
	.body {
		background-color: #F1F1F1;
		height: 100%;
	}

	.body-data {
		display: flex;
		flex-direction: column;
		width: calc(94vw);
		border-radius: calc(1vw);
		margin: calc(1vh) calc(2vw) 0 calc(2vw);
		padding: 0 calc(1vw) 0 calc(1vw);
	}

	.back {
		background-color: #FFFFFF;
	}
</style>
